<template>
  <el-form ref="form" :model="formInline" label-width="100px" class="screen-base-form" size="small">
    <el-row :gutter="20" v-for="item,index in config" :key="index">
      <el-col :span="i.span" v-for="i,k in item" :key="k">
        <screen-item :data="i" v-model="formInline[i.field]" />
      </el-col>
    </el-row>
    <el-form-item :class="!config[config.length -1][0].label ? 'label-margin-none' : '' ">
      <el-button type="primary" icon="el-icon-search" @click="onScreen">搜索</el-button>
      <el-button icon="el-icon-upload2" @click="onSubmit">导出</el-button>
      <el-button icon="el-icon-refresh" @click="onSubmit">刷新</el-button>
    </el-form-item>
  </el-form>
</template>
<script type="text/javascript">
import ScreenItem from './ScreenItem.vue'
import ScreenConfig from './config.js'
import FormData from './form.js'


//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapMutations } = createNamespacedHelpers('synthesize')


export default {
  props: {
    config: {
      type: [Array, Object],
      default: function() {
        return ScreenConfig
      }
    },
    fieldKey:{
      type:[String,Number],
      default:0,
    },
    mak: [Number, String],
    value: [Array, Object]
  },
  components: {
    "screen-item": ScreenItem,
  },
  data() {
    return {
      formInline: {},
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }]
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
      //初始化Where设置
      this.onWhere();
  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    ...mapMutations(['setWhere']),
    ...mapActions(['getTableData', 'getPageTotal']),
    onSubmit() {
      console.log('submit!');
    },
    onWhere() {
      let where = this.getHideField();
      //判断对象是否为空
      if (Object.keys(this.formInline).length) {
        //循环遍历对象
        for (let item in this.formInline) {
          if (this.formInline[item].length) {
            let field = {};
            field[item] = this.formInline[item];
            //对象合并
            Object.assign(where, field);
          }
        }
      }
      this.setWhere({key:this.fieldKey,value:where});
    },
    onScreen() {
      this.onWhere();
      //调用数据
      this.getTableData(this.fieldKey);
      //统计条数
      this.getPageTotal(this.fieldKey);
    },
    //获取隐藏字段
    getHideField() {
      let orderList = {};
      //两次循环获取数据
      this.config.forEach(item => {
        item.forEach(data => {
          if (data.hasOwnProperty('hide') && data.hide) {
            let field = {};
            field[data.field] = data.value;
            //合并对象
            Object.assign(orderList, field);
          }
        })
      });
      return orderList;
    }
  }
}

</script>
<style type="text/css" lang="scss">
.screen-base-form {
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    .el-select {
      width: 100%;

      .el-input {
        width: 100%;
      }
    }
  }

  .el-col {
    border-radius: 4px;
  }
}

</style>
